<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /* class选择器：以.开头 */
        /* 需要手动调用 */
        .s1 {
            color: red;
        }
        .s2 {
            color: blue;
        }
        .d1 {
            width: 600px;
            height: 250px;
            background-color: pink;
        }
        .d2 {
            width: 700px;
            height: 300px;
            background-color: orange;
        }
        /* ID选择器
         ID选择器通常只能调用一次
         */
        #p1 {
            color: purple;
        }
    </style>
</head>
<body>
    <p id="p1">段落1</p>
    <p>段落2</p>
    <div class="d1">
        分区1
    </div>
    <div class="d2">
        分区2
    </div>
    <!-- class选择器 -->
    <p>
        hello <span class="s1">world</span> Lorem ipsum <span class="s2">dolor</span> sit amet, <span>consectetur</span> adipisicing elit. Accusamus aperiam <span class="s1">assumenda</span> autem eius ex, harum maxime neque officiis perferendis qui quidem tempora, ullam vero? Aliquam fugit praesentium reiciendis sequi vero!
    </p>
    <ul>
        <li class="s2">列表1</li>
        <li class="s1">列表2</li>
        <li>列表3</li>
    </ul>
</body>
</html>